<template>
	<div v-for="(item, index) in list" :key="item.id">
		<template v-if="index > 1">
			<game-list :data="item" />
			<div class="h-group-t-xl" />
		</template>
		<template v-else>
			<game-list :data="item" />
			<div class="h-group-t-xl" />

			<template v-if="index === 1">
				<game-list type="provider" />
				<div class="h-group-t-xl" />
			</template>
		</template>
	</div>
</template>
<script lang="ts" setup>
import GameList from '@/components/slots/game-list/index.vue'

import { getAllGameList } from '@/api/other.ts'
import { useRequest } from '@/hooks'
import { onMounted, Ref, ref, watch } from 'vue'
import { useAppStore } from '@/store'
import { getItem, setItem } from '@/utils'
const { run, data } = useRequest<any>(getAllGameList)
const list: Ref<any[]> = ref([])

const appStore = useAppStore()
watch(
	() => appStore.lang,
	() => {
		getData()
	}
)
onMounted(() => {
	getData()
})

const getData = async () => {
	list.value = Array.from(getItem('CASINO_ALL_LIST') || [])
	await run({ page: 1, pageSize: 24 })
	list.value = data.value
	setItem('CASINO_ALL_LIST', data.value)
}
</script>
